<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-Facepile">
  <button class="ms-Facepile-itemBtn ms-Facepile-itemBtn--addPerson js-addPerson">
    <i class="ms-Facepile-addPersonIcon ms-Icon ms-Icon--personAdd"></i>
  </button>
  <div class="ms-Facepile-members">
    <div tabindex="0" role="button" class="ms-Facepile-itemBtn ms-Facepile-itemBtn--member" title="Alton Lafferty">
      <div class="ms-Persona ms-Persona--xs">
        <div class="ms-Persona-imageArea">
          <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
          <img class="ms-Persona-image" src="../persona/Persona.Person2.png" alt="Persona image" alt="Persona image">
        </div>
        <div class="ms-Persona-presence"></div>
        <div class="ms-Persona-details">
          <div class="ms-Persona-primaryText">Alton Lafferty</div>
          <div class="ms-Persona-secondaryText">Accountant</div>
        </div>
      </div>
    </div>
    <div tabindex="0" role="button" class="ms-Facepile-itemBtn ms-Facepile-itemBtn--member" title="Douglas Fielder">
      <div class="ms-Persona ms-Persona--xs">
        <div class="ms-Persona-imageArea">
          <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
        </div>
        <div class="ms-Persona-presence"></div>
        <div class="ms-Persona-details">
          <div class="ms-Persona-primaryText">Douglas Fielder</div>
          <div class="ms-Persona-secondaryText">Public Relations</div>
        </div>
      </div>
    </div>
    <div tabindex="0" role="button" class="ms-Facepile-itemBtn ms-Facepile-itemBtn--member" title="Marcus Lauer">
      <div class="ms-Persona ms-Persona--xs">
        <div class="ms-Persona-imageArea">
          <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
        </div>
        <div class="ms-Persona-presence"></div>
        <div class="ms-Persona-details">
          <div class="ms-Persona-primaryText">Marcus Lauer</div>
          <div class="ms-Persona-secondaryText">Technical Support</div>
        </div>
      </div>
    </div>
  </div>
  <button class="ms-Facepile-itemBtn ms-Facepile-itemBtn--overflow js-overflowPanel">
    <span class="ms-Facepile-overflowText">+3</span>
  </button>
  <div class="ms-Facepile-personaCard">
    @@include('../PersonaCard/PersonaCard.html')
  </div>
</div>

<!-- Panel -->
<div class="ms-Facepile-panel ms-Facepile-panel--addPerson ms-Panel">
  <div class="ms-Overlay ms-Overlay--dark ms-PanelAction-close"></div>
  <div class="ms-Panel-main">
    <div class="ms-Panel-commands">
      <button class="ms-Panel-closeButton ms-PanelAction-close">
        <i class="ms-Panel-closeIcon ms-Icon ms-Icon--x"></i>
      </button> 
    </div>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Members</p>
      <div class="ms-PeoplePicker ms-PeoplePicker--Facepile">
        <div class="ms-PeoplePicker-searchBox">
          <input class="ms-PeoplePicker-searchField" type="text" placeholder="Add members">
        </div>
        <!-- Suggested list -->
        <div class="ms-PeoplePicker-results">
          <div class="ms-PeoplePicker-peopleListHeader">
            <span>Suggested contacts</span>
          </div>
          <ul class="ms-PeoplePicker-peopleList">
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--darkBlue">RM</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Russel Miller</div>
                    <div class="ms-Persona-secondaryText">Sales</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Douglas Fielder</div>
                    <div class="ms-Persona-secondaryText">Public Relations</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--blue">JF</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Jessica Fischer</div>
                    <div class="ms-Persona-secondaryText">Public Relations</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--lightGreen">MG</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Marcel Groce</div>
                    <div class="ms-Persona-secondaryText">Marketing</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Grant Steel</div>
                    <div class="ms-Persona-secondaryText">Public Relations</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--teal">HW</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Harvey Wallin</div>
                    <div class="ms-Persona-secondaryText">Delivery</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
              <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
                <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
                  <div class="ms-Persona-imageArea">
                    <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
                  </div>
                  <div class="ms-Persona-presence"></div>
                  <div class="ms-Persona-details">
                    <div class="ms-Persona-primaryText">Marcus Lauer</div>
                    <div class="ms-Persona-secondaryText">Marketing</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="ms-PeoplePicker-searchMore js-searchMore">
            <div tabindex="0" role="button" class="ms-PeoplePicker-searchMoreBtn">
              <div class="ms-PeoplePicker-searchMoreIcon">
                <i class="ms-Icon ms-Icon--search"></i>
              </div>
              <div class="ms-PeoplePicker-searchMorePrimary">Search Contacts &amp; Directory</div>
            </div>
          </div>
        </div>
        <!-- Members list -->
        <div class="ms-PeoplePicker-selected is-active">
          <div class="ms-PeoplePicker-selectedHeader">
            <span class="ms-PeoplePicker-selectedCount">3</span> member<span>s</span>
          </div>
          <ul class="ms-PeoplePicker-selectedPeople">
            <li class="ms-PeoplePicker-selectedPerson">
              <div class="ms-Persona ms-Persona--sm">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png" alt="Persona image">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Alton Lafferty</div>
                  <div class="ms-Persona-secondaryText">Accountant</div>
                </div>
              </div>
              <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
            </li>
            <li class="ms-PeoplePicker-selectedPerson">
              <div class="ms-Persona ms-Persona--sm">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Douglas Fielder</div>
                  <div class="ms-Persona-secondaryText">Public Relations</div>
                </div>
              </div>
              <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
            </li>
            <li class="ms-PeoplePicker-selectedPerson">
              <div class="ms-Persona ms-Persona--sm">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Marcus Lauer</div>
                  <div class="ms-Persona-secondaryText">Technical Support</div>
                </div>
              </div>
              <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
            </li>
          </ul>
        </div>
        <div class="ms-PeoplePicker-personaCard">
          @@include('../PersonaCard/PersonaCard.html')
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="../peoplepicker/jquery.peoplepicker.js"></script>
<script type="text/javascript" src="../panel/jquery.panel.js"></script>
<script type="text/javascript" src="../spinner/spinner.js"></script>
